<template>
	<div>
		<!-- 导航栏 -->
		<Myheader title="个人信息编辑" :show="false"></Myheader>
		<router-link class="info" :to="'/mycompile/?id=' + userInfo.id">
			<!-- 1.0 用户信息 -->
			<div class="left">
				<van-image round fit="cover" width="100%" height="100%" :src="userInfo.head_img" />
			</div>
			<div class="name">
				<p class="username">
					<!-- 其实性别旧两个，可以通过 v-if v-else 互斥显示渲染一个 -->
					<i class="iconfont iconxingbienan" v-if="userInfo.gender == 1"></i>
					<i class="iconfont iconxingbienv" v-else></i>
					{{ userInfo.nickname }}
				</p>
				<p class="date">{{ userInfo.create_date | formatDate }}</p>
			</div>
			<div class="right"><span class="iconfont iconjiantou1"></span></div>
		</router-link>
		<!-- <div class="info" @click="$router.push({nmae='/mycompile'})">
            如果用click 不需要用this
			<div class="left">
				<van-image round width="100%" height="100%" :src="userInfo.head_img" />
			</div>
			<div class="name">
				<p class="username">
					
					<i class="iconfont iconxingbienan" v-if="userInfo.gender == 1"></i>
					<i class="iconfont iconxingbienv" v-else></i>
					{{ userInfo.nickname }}
				</p>
				<p class="date">{{ userInfo.create_date | formatDate }}</p>
			</div>
			<div class="right"><span class="iconfont iconjiantou1"></span></div>
		</div> -->
		<!-- 2.0 单元格 -->
		<Mycell title="我的关注" desc="关注的用户" :to="'/myattention?id=' + userInfo.id"></Mycell>
		<Mycell title="我的跟帖" desc="跟帖/回复" :to="'/myfollow?id=' + userInfo.id"></Mycell>
		<Mycell title="我的收藏" desc="文章/视频" :to="'/mycollect?id=' + userInfo.id"></Mycell>
		<Mycell title="设置" desc="" @click="cellFn"></Mycell>
		<Mybtn class="exit" @btnN="logout">退出</Mybtn>
	</div>
</template>
<script>
// import moment from "moment";
import Mycell from "@/components/Mycell.vue";
import Mybtn from "@/components/Mybtn";
import {removeToken} from "@/utils/localData";
import {userDetailAPI} from "@/apis/user";
import request from "@/utils/request";
import Myheader from "@/components/Myheader.vue";

export default {
	components: {
		Mycell,
		Mybtn,
		Myheader,
	},
	methods: {
		cellFn() {
			this.$router.push({
				path: "/Myset",
			});
		},
		logout() {
			// 1. 询问是否退出 - Dialog 弹出框
			// 2. 用户点击了确定
			//    确认：
			//     2.1.1. 清除token
			//     2.1.2  跳转到登录页
			//    取消：不做任何事情
			this.$dialog
				.confirm({
					message: "是否退出登录",
				})
				.then(() => {
					removeToken();
					// localStorage.removeItem("hmttToken");
					this.$toast.success({
						message: "退出成功",
						duration: 800,
						onClose: () => {
							// 用 replace 就不能返回
							this.$router.push({
								name: "login",
							});
						},
					});
				})
				.catch(() => {
					// 取消：不做任何事情
					// on cancel
					// 得有这个结构才不报错
				});
		},
	},
	data() {
		return {
			pic: require("@/assets/timg (1).jpg"),
			userInfo: {}, // 💥注意：这里的初始值是对象，如果是空字符串，模板中的点语法引用就会报错
		};
		//         create_date: "2021-06-26T02:06:06.000Z"
		// gender: 1
		// head_img: "/uploads/image/IMG1568705287936.jpeg"
		// id: 14
		// nickname: "walk"
		// password: "123"
		// post_comments: 0
		// post_star: 0
	},
	async created() {
		// 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
		const res = await userDetailAPI(this.$route.query.id);
		// 根据 id 获取用户信息
		console.log(res);
		// 加多一层判断 没拿到数据不执行
		if (res.data.data) {
			// 拼接一下路径
			// 获取用户头像是相对路径，需要拼接请求基地址
			// 拼接后赋值给自己
			res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
			this.userInfo = res.data.data;
			// console.log(res.data.data);
			// 把处理后的数据绑定到 data 中，再用于页面展示
		}
	},
	// filters: {
	// 	formatDate(val) {
	// 		return moment(val).format("YYYY-MM-DD");
	// 	},
	// },
};
</script>
<style lang="less" scoped>
.exit {
	position: fixed;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.info {
	font-family: "Roboto Regular", "Roboto";
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 20px;
	border-bottom: 5px solid #e4e4e4;
	font-size: 16px;
	color: #222;
	.left {
		width: 80px;
		height: 80px;
		// background-color: pink;
	}
	.name {
		flex: 1;
		margin-left: 20px;
		.date {
			color: #949494;
			font-size: 14px;
		}
		p {
			margin: 6px 0;
			i {
				padding: 0 2px;
			}
			.iconxingbienan {
				color: skyblue;
			}
			.iconxingbienv {
				color: pink;
			}
		}
	}
	.right {
		color: #949494;
		font-size: 14px;
	}
}
</style>
